<template>
<div>
  <el-form 
  validate-on-rule-change="false"
  :inline="state.inline" ref="form" :rules="state.rule" :model="state.form" label-width="80px">
    <el-form-item
      v-for="item in state.labelAndType"
      :key="item.model"
      :label="item.label"
      :prop="item.model"
    >
      <!-- 文本 -->
      <el-input
        v-if="item.type == 'input'"
        :placeholder="'请输入' + item.label"
        v-model="state.form[item.model]"
      >
      </el-input>
      <!-- 下拉框 -->
      <el-select
      style="width:100%"
      clearable
        v-if="item.type == 'select'"
        :placeholder="'请选择' + item.label"
        v-model="state.form[item.model]"
      >
        <el-option
          v-for="opt in item.option"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        ></el-option>
      </el-select>
      <!-- 单选按钮 -->
      <el-radio-group v-model="form[item.model]" v-if="item.type === 'radio'">
        <el-radio-button
          v-for="opt in item.option"
          :key="opt.value"
          :label="opt.label"
          border
          >{{ opt.value }}</el-radio-button
        >
      </el-radio-group>
      <!--switch-->
      <el-switch v-model="form[item.model]" v-if="item.type === 'switch'">
      </el-switch>
      <!--el-date-picker-->
      <el-date-picker
        v-model="form[item.model]"
        type="date"
        v-if="item.type === 'date'"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <!--textarea输入框-->
      <el-input
        v-model="form[item.model]"
        type="textarea"
        v-if="item.type === 'textarea'"
        :placeholder="'请输入' + item.label"
        :autosize="{ minRows: item.min, maxRows: item.max }"
      >
      </el-input>
    </el-form-item>
    <!--预留一个插槽-->
    <el-form-item>
      <slot></slot>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">立即创建</el-button>
      <el-button @click="cancle">取消</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script>
import {ref,reactive} from 'vue';
export default {
  components: {},
  props: {
    inline:Boolean,
    form: Object,
    rule: Object,
    labelAndType:Array
  },
  setup(props,{emit}) {
      console.log(props);
      let form=ref(null)
      let state=reactive({
          inline:props.inline,
          form:props.form,
          rule:props.rule,
          labelAndType:props.labelAndType
      })
      function submit(){
          form.value.validate((valid) => {
          if (valid) {
            emit("form_sub",state.form)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
      const cancle=()=>{
        emit("form_cancle",false)
      }
        return {
            state,
            form,
            submit,
            cancle
        }
  },
};
</script>
<style lang="scss" scoped>
</style>